/**
 * Created by renzhiqiang on 18/3/5.
 */
/**
 * Created by renzhiqiang on 18/1/27.
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Modal,Tabs} from 'antd';
import {FFTableView} from './../../../public/components/';
const TabPane = Tabs.TabPane;
function selecItem({dispatch, selecItem}) {
  var {visible,selectList,selectTotal,pageParam,loading,selectItems} = selecItem;
  const actionTypeHead = 'selecItem/';
  function saveHander() {
    dispatch({type: `${actionTypeHead}save`,payload: {visible:false}});
    dispatch({type: `userProjectAdd/save`,payload: {userList:selectItems}});
  };
  function hideModelHandler() {
    dispatch({type: `${actionTypeHead}save`,payload: {visible:false}});
  };
  function select(data,type) {
    if(type=="add"){
      let selectObj={
        realName:data.realname,
        userName:data.username,
        mailAddress:data.mailaddress
      };
      selectItems.push(selectObj);
    }else {
      selectItems=selectItems.filter(function (obj) {
        return obj.userName!=data.username;
      })
    }
    dispatch({type: `selecItem/save`, payload: {selectItems:selectItems}})
  };
  // 商品列表的动态配置
  const tableViewProps = {
    columns: [
      {title: '用户名称', dataIndex: 'realname', key: 'realname', className:"tableCenter",render: (text, record) => (text ? text:'----' )},
      {title: '登录名', dataIndex: 'username', key: 'username', className:"tableCenter",render: (text, record) => (text ? text:'----' )},
      {title: '邮箱', dataIndex: 'mailaddress', key: 'mailaddress', className:"tableCenter",render: (text, record) => (text ? text:'----' )},
      {title: '操作', dataIndex: 'text', key: 'text', className:'tableCenter',render:function (text, data) {
        let $sel=selectItems.filter(function (val) {return val.userName==data.username});
        return <div><div style={{display:$sel.length==0 ? "inline-block":"none",fontSize: "18px",cursor:"pointer"}} onClick={select.bind(this,data,'add')}>+</div><div style={{display: $sel.length==0 ? "none":"inline-block",fontSize: "18px",cursor:"pointer"}} onClick={select.bind(this,data,'del')}>-</div></div>
      }},
    ],
    dataSource: selectList,
    total: selectTotal,
    loading: loading,
    pageParam: {
      current: pageParam.pageNo,
      pageSize: pageParam.pageSize,
// 每页面数量回调
      onShowSizeChange: (current, pageSize) => {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              pageNo: 1,
              pageSize: pageSize,
              keyword: ''
            }
          }
        });
      },
      // 翻页回调
      onChange: (current) => {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              ...pageParam,
              pageNo: current,
            },
          }
        });
      },
      //搜索回调
      onSearch (value) {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              ...pageParam,
              pageNo: 1,
              keyword: value
            }
          }
        })
      }
    }
  };
  return (
    <Modal title='选择用户' width={1100} visible={visible} onOk={saveHander} onCancel={hideModelHandler}>
      <FFTableView {...tableViewProps}/>
    </Modal>
  )
}
function mapStateToProps({selecItem}) {
  return {selecItem};
}
export default connect(mapStateToProps)(selecItem)
